<template>
<div>
  <!--  分隔-->
  <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-light">
      <div style="float: left; margin: 20px 100px; font-weight: 700;color:#606266;font-size: 20px"><i class="el-icon-search"></i>延误查询</div>
    </div></el-col>
  </el-row>
    <!--  查询条件-->
    <el-form :inline="true" :model="queryForm" style="text-align: left; margin: 0 10%">
      <el-form-item label="车牌号">
        <el-input v-model="queryForm.dispatchTicket.carNumber" placeholder="车牌号" clearable></el-input>
      </el-form-item>
      <el-form-item label="调度单号">
        <el-input v-model="queryForm.ticketId" placeholder="调度单号" clearable></el-input>
      </el-form-item>
      <el-form-item label="司机">
        <el-input v-model="queryForm.dispatchTicket.carInfo.anotherOne" placeholder="司机" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="info" plain @click="getList">查询</el-button>
        <el-button type="info"   @click="queryFormReset()" plain>重置</el-button>
      </el-form-item>
    </el-form>
  <!--  分隔-->
  <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-light">
      <div style="float: left; margin: 0 100px; font-weight: 700;color:#606266;font-size: 20px"><i class="el-icon-s-unfold"></i>数据列表</div>
    </div></el-col>
  </el-row>
  <div id="s" class="animate__animated animate__zoomIn animate__delay-0.5s" style="margin-top: 20px">
  <div id = "list">
    <el-table :data="tableData" stripe style="width: 100%" :border="true" :header-cell-style="{background:'#209e91', color:'#ffffff',textAlign:'center'}">
      <el-table-column
        prop="id"
        label="序号">
      </el-table-column>
      <el-table-column
        prop="did"
        label="延误单号">
      </el-table-column>
      <el-table-column
        prop="ticketId"
        label="调度单号">
      </el-table-column>
      <el-table-column
        prop="dispatchTicket.carNumber"
        label="车牌号">
      </el-table-column>
      <el-table-column
        prop="dispatchTicket.carInfo.anotherOne"
        label="司机">
      </el-table-column>
      <el-table-column
        prop="transNode"
        label="运输节点">
      </el-table-column>
      <el-table-column
        prop="dispatchTicket.endTime"
        label="预计到达时间">
      </el-table-column>
      <el-table-column
        prop="dispatchTicket.actualEndTime"
        label="实际到达时间">
      </el-table-column>
      <el-table-column
        prop="delayReason"
        label="延误原因">
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-light">
          <div style="margin: 20px"></div>
        </div>
      </el-col>
    </el-row>
    <!--  分页-->
    <el-pagination
      @size-change="getList"
      @current-change="getList"
      :current-page.sync="queryForm.pageNum"
      :page-sizes="[10, 20, 30, 40, 60, 80, 100]"
      :page-size.sync="queryForm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-light">
          <div style="margin: 20px"></div>
        </div>
      </el-col>
    </el-row>
  </div>
  </div>
</div>
</template>

<script>
export default {
  name: "DispatchMaintenance",
  data() {
    return {
      //查询对象
      queryForm: {
        dispatchTicket: {
          carNumber: '',
          carInfo:{
            anotherOne:''
          }
        },
        ticketId:'',
        abnormalType:'',
        pageNum: 1,
        pageSize: 10
      },
      //表格数组
      tableData: [],
      //共多少条
      total: 0,
      // 下拉状态列表
      statusList:[],
    }
  },
  methods: {
    getList() {
      this.$axios({
        url: 'dispatch/delay/list',
        method: 'post',
        data: this.queryForm
      }).then(res => {
        if (res.data.success) {
          this.tableData = res.data.object.list;
          this.total = res.data.object.total;
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    queryFormReset(){
      this.queryForm.status = null;
      this.queryForm.carNumber = null;
      this.queryForm.carInfo.anotherOne = null;
      this.getList();
    },
  },
  created() {
    this.getList();
    //this.getStatusList();
    //this.getAcceptResultList();
  }
}
</script>

<style scoped>
.el-button--info:hover {
  background: #209e91;
  border-color: #209e91;
  color: #FFF;
}
#s{
  width:90%;
  margin:10px auto;
  background-color: #ffffff;
  box-shadow: 10px 10px 5px #c4c6c7;
  border-radius: 5px
}
</style>
